<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>地图</title>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=wwuP7hFKlYnG52E9LKqo2rPbnrviryGx"></script>
</head>
<body>
    <style type="text/css">
        #allmap{
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            position: absolute;
            padding-bottom: 20px;
        }
    </style>

    <div id="allmap"></div>

    <script type="text/javascript">
        // var api = frameElement.api, W = api.opener;  // api.opener 为加载lhgdialog.min.js文件的页面的window对象
        // 保存标注点
        function save_maps() {
            document.getElementById('maps').valueOf()
            api.close();
        }
        // 设置地图默认的鼠标指针样式
        var is_bz = false;

        function set_cursor(){
            is_bz = true;
            map.setDefaultCursor("crosshair");
        }

        // 百度地图API功能
        //var map = new BMap.Map("allmap");
        var map = new BMapGL.Map("allmap");
        var point = new BMapGL.Point([[${longitude}]], [[${latitude}]]);
        map.centerAndZoom(point, 14);
        map.enableScrollWheelZoom();    // 可以鼠标滚动 缩放比例

        map.addEventListener("click", function (e) {
            if(!is_bz){
                return;
            }
            map.clearOverlays()
            var point = new BMap.Point(e.point.lng, e.point.lat);
            document.getElementById('maps').value = e.point.lng + "," + e.point.lat;
            var marker = new BMap.Marker(point);  // 创建标注
            map.addOverlay(marker); //将标注添加到地图中
            marker.enableDragging(); //可拖拽
            marker.addEventListener("dragend", function (e) {
                var p = marker.getPosition(); // 获取marker位置
                document.getElementById('maps').value = p.lng + ',' + p.lat;
            });
        });

        // 地图增加信息窗口
        // var point = new BMap.Point(${longitude}, ${latitude});
        var point = new BMapGL.Point([[${longitude}]], [[${latitude}]]);
        var marker = new BMapGL.Marker(point); // 创建标注
        // var marker = new BMap.Marker(point); // 创建标注
        map.addOverlay(marker);  //将标注添加到地图中
        var sContent = "<div style='padding:10px;'><span style='font-size: 12px; font-weight: bold;'>[[${address}]]</span></div>";
        // var infoWindow = new BMap.InfoWindow(sContent); // 创建信息窗口对象
        var infoWindow = new BMapGL.InfoWindow(sContent);
        marker.addEventListener("click", function () {
            this.openInfoWindow(infoWindow);
            infoWindow.redraw();    // 防止在网速较慢，图片未加载时，生成的信息框高度比图片的总高度小，导致图片部分被隐藏
        });
        marker.openInfoWindow(infoWindow);

        // 地图增加可视区域关键字搜索
        map.addControl(new BMapGL.MapTypeControl({
            mapTypes:[
                BMAP_NORMAL_MAP,
                BMAP_HYBRID_MAP
            ]
        }));  // 2D图，卫星图
        map.addControl(new BMapGL.MapTypeControl({
            anchor: BMAP_ANCHOR_TOP_RIGHT
        }));  // 左上角，默认地图控件

        map.addControl(new BMapGL.NavigationControl());  // 添加默认缩放平移控件
        map.addControl(new BMapGL.NavigationControl({
            anchor: BMAP_ANCHOR_BOTTOM_LEFT,
            type: BMAP_NAVIGATION_CONTROL_PAN
        }));  // 左下角，仅包含平移按钮

    </script>
</body>
</html>